<template>
    <div class="indexPDF">
        <div class="pdfTitle">
            <div class="pdfName">
                <div class="nameLeft">
                    <i class="iconfont icon-santiaoxian_"></i>
                </div>
                <div class="nameRight">
                    <div class="pdfFile">
                        {{ pdfName }}
                    </div>
                    <div class="pdfSize">

                    </div>
                </div>
            </div>
            <div class="pageNum">
                <div class="jian" @click="pageDown"> - </div>
                <div class="num1"> {{ pdfState.pageNum }}</div> / <div class="num2">{{ pdfState.numPages }}</div>
                <div class="jia" @click="pageUp">+</div>
            </div>
            <span style="color: #fff;font-size: 20px;">|</span>
            <div class="pageScale">
                <div class="jian" @click="zoomOut"> - </div>
                <div class="num">{{ Math.trunc(scaleData * 100).toString() }} %</div>
                <div class="jia" @click="zoomIn">+</div>
            </div>
            <div class="down" @click="PDFDownload">
                <i class="iconfont icon-xiazai-wenjianxiazai-16"></i>
            </div>
            <div class="back" @click="back">
                <img src="@/assets/backpdf.png" alt="">
            </div>
        </div>
        <div class="pdfContent">
            <div v-if="isLoading" class="loading-container">
                <div class="loading-text">正在加载PDF，请稍候...</div>
                <div class="loading-spinner"></div>
            </div>
            <div v-else id="vue-pdf-view">
                <div id="page-view" :style="{
                    position: 'absolute',
                    top: '50%',
                    left: '50%',
                    transform: `translate(-50%,-50%) scale(${scaleData})`,
                    width: '100%',
                    height: `${pageHeight}`,
                }">
                    <vue-pdf-embed :source="pdfState.pdfSource" :page="pdfState.pageNum" textLayer ref="vuePdf" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref, inject, watch } from 'vue';
import { createLoadingTask } from 'vue3-pdfjs/esm';
import VuePdfEmbed from "vue-pdf-embed";
// 导入自己的文件
import pdfUrl from '../../../assets/test.pdf';

const isLoading = ref(true);

const props = defineProps({
    pdfUrl: {
        type: String,
        default: ""
    },
    pdfName: {
        type: String,
        default: ""
    }
})


//关闭pdf展示
const showPDF = inject('showPDF')
const back = () => {
    showPDF.value = false
}
const pdfState = reactive({
    pdfSource: {
        url: props.pdfUrl,
        cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/',
        cMapPacked: true,
    },
    // 当前页
    pageNum: 1,
    // 总页数
    numPages: 1,
})

watch(() => props.pdfUrl, (newValue) => {
    if (!newValue) return
    isLoading.value = true;
    pdfState.pdfSource = {
        url: newValue,
        cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/',
        cMapPacked: true,
    };

    // 重新加载PDF文档
    const loadingTask = createLoadingTask(pdfState.pdfSource);
    loadingTask.promise
        .then(pdf => {
            pdfState.numPages = pdf.numPages;
            pdfState.pageNum = 1;
        })
        .catch(error => {
            console.error('PDF加载失败:', error);
        })
        .finally(() => {
            isLoading.value = false; // 加载完成或失败后隐藏加载状态
        });

}, { immediate: true })
const vuePdf = ref(null);

//下一页
function pageDown() {
    if (pdfState.pageNum >= 1) {
        pdfState.pageNum--;
    }
    // 当页面位于首页时，再次点击上一页跳转至尾页
    if (pdfState.pageNum == 0) {
        pdfState.pageNum = pdfState.numPages;
    }
}

//上一页
function pageUp() {
    if (pdfState.pageNum <= pdfState.numPages) {
        pdfState.pageNum++;
    }
    // 当页面位于尾页时，再次点击下一页跳转至首页
    if (pdfState.pageNum > pdfState.numPages) {
        pdfState.pageNum = 1;
    }
}
const scaleData = ref(1.0);
const pageHeight = ref('100%');

// 放大
function zoomIn() {
    scaleData.value += 0.1;
    pageHeight.value = (parseInt(pageHeight.value) - 5.0) + '%';
}
// 缩小
function zoomOut() {
    scaleData.value -= 0.1;
    pageHeight.value = (parseInt(pageHeight.value) + 5.0) + '%';
}

//获取文件名（用于 文件打印和下载）
function getPDFFileName() {
    const last_index = pdfState.pdfSource.url.lastIndexOf('/');
    return pdfState.pdfSource.url.slice(last_index + 1);
}

//pdf文件下载
function PDFDownload() {
    vuePdf.value.download(getPDFFileName());
}
onMounted(() => {
    isLoading.value = true; // 初始化时显示加载状态
    const loadingTask = createLoadingTask(pdfState.pdfSource);
    loadingTask.promise.then((pdf) => {
        // 获取页面总页数
        pdfState.numPages = pdf.numPages;
    });
});
</script>

<style lang="scss" scoped>
.indexPDF {
    height: 100%;

    .pdfTitle {
        height: 84px;
        background: #5C879A;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
        padding-top: 20px;

        .pdfName {
            display: flex;
            align-items: center;
            color: #fff;
            padding-left: 20px;

            .nameLeft {
                .icon-santiaoxian_ {
                    font-size: 40px !important;
                }
            }

            .nameRight {
                margin-left: 8px;

                .pdfFile {
                    font-size: 13px;
                    width: 160px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .pdfSize {
                    font-size: 8px;
                    margin-top: 4px;
                }
            }
        }

        .pageNum {
            color: #fff;
            margin-left: 20px;
            margin-right: 20px;
            display: flex;
            align-items: center;

            .jia,
            .jian {
                font-size: 25px;
                display: inline-block;
                margin: 0 4px 7px;
                cursor: pointer;

            }

            .num1 {
                display: inline-block;
                background-color: #374A48;
                width: 15px;
                height: 15px;
                line-height: 15px;
                text-align: center;
                font-size: 10px;
            }

            .num2 {
                font-size: 10px;
            }
        }

        .pageScale {
            color: #fff;
            margin-left: 20px;
            display: flex;
            align-items: center;

            .jia,
            .jian {
                font-size: 25px;
                display: inline-block;
                margin: 0 4px 7px;
                cursor: pointer;
                line-height: 1;
            }

            .num {
                width: 31px;
                height: 15px;
                display: inline-block;
                background-color: #374A48;
                text-align: center;
                line-height: 15px;
                font-size: 9px;
            }
        }

        .down {
            color: #fff;
            margin-left: 30px;
            margin-bottom: 20px;
            font-size: 40px !important;
        }

        .back {
            width: 24px;
            height: 24px;
            margin-left: 30px;
            margin-bottom: 10px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .pdfContent {
        position: relative;
        height: calc(100vh - 120px);

        #vue-pdf-view {
            position: absolute;
            left: 50%;
            transform: translateX(-50%) scale(1.0);
            width: 80%;
            height: 100%;
            text-align: center;

            /* 内容溢出显示滚动条 */
            overflow: scroll;
            /* 隐藏x、y轴滚动条 */
            overflow-y: hidden;
            overflow-x: hidden;
        }

        /* 设置滚动栏的宽、高 */
        #vue-pdf-view::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        /* 设置滚动条的样式 */
        #vue-pdf-view::-webkit-scrollbar-thumb {
            border-radius: 15px;
            background-color: #eee;
        }

        /* 鼠标经过滚动条变换颜色 */
        #vue-pdf-view::-webkit-scrollbar-thumb:hover {
            background-color: #CBCBFF;
        }
    }
}

.loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #6E8E8B;

    .loading-text {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .loading-spinner {
        width: 30px;
        height: 30px;
        margin: 0 auto;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #6E8E8B;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>